<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片访问测试工具</title>
    <script src="./js/image-helper.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1, h2 {
            color: #333;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 4px;
        }
        .image-wrapper {
            margin-top: 15px;
            border: 1px dashed #ccc;
            padding: 10px;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
        }
        #all-urls-container {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 4px;
        }
        .url-item {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .url-item.success {
            border-color: #4CAF50;
            background-color: #f0fff0;
        }
        .url-item.failure {
            border-color: #f44336;
            background-color: #fff0f0;
        }
    </style>
</head>
<body>
    <h1>图片访问测试工具</h1>
    
    <div>
        <h2>1. 输入图片路径</h2>
        <input type="text" id="image-url" placeholder="例如: /upload/images/20250512/06a0502025744698b227a7a073a807b3.jpg" 
               value="/upload/images/20250512/06a0502025744698b227a7a073a807b3.jpg">
        <button id="test-btn">测试图片访问</button>
        <button id="test-all-btn">测试所有可能的URL</button>
        <button id="copy-url-btn">复制URL到剪贴板</button>
    </div>
    
    <div id="result">
        <h2>2. 测试结果</h2>
        <div id="status">请点击"测试图片访问"按钮开始测试</div>
        
        <div class="image-wrapper">
            <h3>图片预览：</h3>
            <div id="image-container"></div>
        </div>
        
        <div class="image-wrapper">
            <h3>HTML代码（可复制到编辑器使用）：</h3>
            <textarea id="html-code" rows="4" style="width: 100%; margin-top: 10px;"></textarea>
            <button id="copy-html-btn" style="margin-top: 10px;">复制HTML代码</button>
        </div>
        
        <div class="image-wrapper">
            <h3>Markdown代码（可复制到编辑器使用）：</h3>
            <textarea id="md-code" rows="2" style="width: 100%; margin-top: 10px;"></textarea>
            <button id="copy-md-btn" style="margin-top: 10px;">复制Markdown代码</button>
        </div>
    </div>
    
    <div id="all-urls-container" style="display: none;">
        <h2>3. 所有可能URL测试结果</h2>
        <div id="urls-list"></div>
    </div>
    
    <script>
        document.getElementById('test-btn').addEventListener('click', function() {
            testImage();
        });
        
        document.getElementById('test-all-btn').addEventListener('click', function() {
            testAllUrls();
        });
        
        document.getElementById('copy-url-btn').addEventListener('click', function() {
            const urlInput = document.getElementById('image-url');
            copyToClipboard(urlInput.value);
            alert('URL已复制到剪贴板');
        });
        
        document.getElementById('copy-html-btn').addEventListener('click', function() {
            const htmlCode = document.getElementById('html-code');
            copyToClipboard(htmlCode.value);
            alert('HTML代码已复制到剪贴板');
        });
        
        document.getElementById('copy-md-btn').addEventListener('click', function() {
            const mdCode = document.getElementById('md-code');
            copyToClipboard(mdCode.value);
            alert('Markdown代码已复制到剪贴板');
        });
        
        function testImage() {
            const imageUrl = document.getElementById('image-url').value.trim();
            const statusDiv = document.getElementById('status');
            const imageContainer = document.getElementById('image-container');
            const htmlCode = document.getElementById('html-code');
            const mdCode = document.getElementById('md-code');
            
            statusDiv.textContent = '正在测试图片...';
            imageContainer.innerHTML = '';
            
            // 使用我们的辅助工具来检查图片可访问性
            checkImageAccessibility(
                imageUrl,
                function(accessibleUrl) {
                    statusDiv.innerHTML = '<span style="color: green;">✓ 图片可以正常访问</span>';
                    statusDiv.innerHTML += '<p>访问成功的URL: ' + accessibleUrl + '</p>';
                    
                    // 创建一个新的图片元素
                    const img = new Image();
                    img.onload = function() {
                        statusDiv.innerHTML += '<p>图片尺寸: ' + img.width + ' x ' + img.height + ' 像素</p>';
                    };
                    img.src = accessibleUrl;
                    imageContainer.appendChild(img);
                    
                    // 生成HTML代码
                    htmlCode.value = '<img src="' + accessibleUrl + '" alt="图片" style="max-width: 100%;">';
                    
                    // 生成Markdown代码
                    mdCode.value = '![图片](' + accessibleUrl + ')';
                },
                function(errorMsg) {
                    statusDiv.innerHTML = '<span style="color: red;">✗ 图片无法访问</span>';
                    statusDiv.innerHTML += '<p>' + errorMsg + '</p>';
                    statusDiv.innerHTML += '<p>请检查图片路径是否正确，或者服务器是否允许访问该资源。</p>';
                    
                    // 生成HTML代码(即使图片不可访问)
                    htmlCode.value = '<img src="' + imageUrl + '" alt="图片" style="max-width: 100%;">';
                    
                    // 生成Markdown代码
                    mdCode.value = '![图片](' + imageUrl + ')';
                }
            );
        }
        
        function testAllUrls() {
            const imageUrl = document.getElementById('image-url').value.trim();
            const allUrlsContainer = document.getElementById('all-urls-container');
            const urlsList = document.getElementById('urls-list');
            
            allUrlsContainer.style.display = 'block';
            urlsList.innerHTML = '<p>正在测试所有可能的URL...</p>';
            
            // 获取所有可能的URL
            const backupUrls = getBackupImageUrls(imageUrl);
            
            // 创建一个计数器和结果数组
            let testedCount = 0;
            const results = [];
            
            // 测试每个URL
            backupUrls.forEach(function(url, index) {
                const img = new Image();
                
                img.onload = function() {
                    results[index] = {
                        url: url,
                        success: true
                    };
                    testedCount++;
                    if (testedCount === backupUrls.length) {
                        displayUrlResults(results);
                    }
                };
                
                img.onerror = function() {
                    results[index] = {
                        url: url,
                        success: false
                    };
                    testedCount++;
                    if (testedCount === backupUrls.length) {
                        displayUrlResults(results);
                    }
                };
                
                // 添加时间戳防止缓存
                const timestampedUrl = url + (url.indexOf('?') === -1 ? '?' : '&') + 't=' + new Date().getTime();
                img.src = timestampedUrl;
            });
        }
        
        function displayUrlResults(results) {
            const urlsList = document.getElementById('urls-list');
            urlsList.innerHTML = '';
            
            results.forEach(function(result) {
                const urlItem = document.createElement('div');
                urlItem.className = 'url-item ' + (result.success ? 'success' : 'failure');
                
                const statusSpan = document.createElement('span');
                statusSpan.style.color = result.success ? 'green' : 'red';
                statusSpan.style.fontWeight = 'bold';
                statusSpan.textContent = result.success ? '✓ 成功' : '✗ 失败';
                
                const urlDiv = document.createElement('div');
                urlDiv.textContent = result.url;
                
                const copyButton = document.createElement('button');
                copyButton.textContent = '复制此URL';
                copyButton.style.marginTop = '5px';
                copyButton.addEventListener('click', function() {
                    copyToClipboard(result.url);
                    alert('URL已复制到剪贴板');
                });
                
                urlItem.appendChild(statusSpan);
                urlItem.appendChild(document.createElement('br'));
                urlItem.appendChild(urlDiv);
                urlItem.appendChild(document.createElement('br'));
                urlItem.appendChild(copyButton);
                
                urlsList.appendChild(urlItem);
            });
            
            // 添加成功总结
            const successCount = results.filter(r => r.success).length;
            const summaryDiv = document.createElement('div');
            summaryDiv.style.marginTop = '15px';
            summaryDiv.style.fontWeight = 'bold';
            summaryDiv.textContent = '测试结果: ' + successCount + ' 个成功, ' + 
                                     (results.length - successCount) + ' 个失败';
            urlsList.appendChild(summaryDiv);
        }
        
        function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
        }
        
        // 自动运行测试
        window.onload = function() {
            testImage();
        };
    </script>
</body>
</html> 